<template>
    <div class="container">
        <div class="content">
            当前用户ID：{{user.id}}
            <el-form ref="form" label-width="100px">
                <el-form-item label="点对点/群发">
                    <el-input v-model="message1" size="medium" style="width: 300px;" placeholder="用户ID"></el-input>
                    <el-button type="primary" size="medium" @click="p2pHandler">发送到Controller</el-button>
                    <el-button type="primary" size="medium" @click="sendHandler">发送到Ws</el-button>
                </el-form-item>

                <el-form-item label="广播消息">
                    <el-input v-model="message2" size="medium" style="width: 300px;" placeholder="消息"></el-input>
                    <el-button type="primary" size="medium" @click="broadcastHandler">发送</el-button>
                </el-form-item>

            </el-form>
            
        </div>

        <div class="content margin-top-10">
            <ul>
                <li v-for="(item, index) in receive" :key="index">{{index}}===>{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import SockJS from 'sockjs-client'
    import Stomp from 'stompjs'
    import http from '@/utils/http';
    import { mapGetters } from 'vuex'

    export default {
        name: 'websocket',
        data() {
            return {
                message1: null, //发送的内容
                message2: null, //发送的内容
                receive: []  //返回的内容
            }
        },
        computed: {
            ...mapGetters(['user'])
        },
        created() {
            this.SockJSConnect()
        },
        methods: {
            p2pHandler() { //点对点或群发消息，将消息发送到Controller，在由controller调用WebSocket的handler来处理
                http({
                    url: 'http://gateway.bojun.com/websocket/h5/sendToUser',
                    method: 'post',
                    data: {ids: this.user.id, message: this.message1}
                })
            },
            broadcastHandler() { //广播消息，将消息发送到Controller，在由controller调用WebSocket的handler来处理
                http({
                    url: 'http://gateway.bojun.com/websocket/h5/sendToAllUser',
                    method: 'post',
                    data: {message: this.message2}
                })
            },
            sendHandler() {
                //直接将消息发送到ws下
                ws.send(JSON.stringify({"id": this.user.id, "message": this.message1}))
            },

            SockJSConnect() {
                const _this = this
                let sock = new SockJS('http://localhost:8888/portfolio')
                let stomp = Stomp.over(sock);//使用STMOP子协议的WebSocket客户端
                //let socket = new SockJS('http://gateway.bojun.com/websocket/sockjs/aa')

                sock.onopen = function() {
                    console.log('open');
                    stomp.send('/aloneRequest', {}, "xxxxxxxxxxxxxxxxxxxxxxxxxxx");

                    stomp.subscribe('/user/0001/alone/getResponse',function(response){
                        console.log('=========='+response)
                    });
                };

                sock.onmessage = function(e) {
                    console.log('message', e.data);
                    sock.close();
                };

                sock.onclose = function() {
                    console.log('close');
                };
            }
        }
    }
</script>

<style scoped>

</style>